<div class="eshop">

    <div class="eshop-top">
        <!--    左边订单部分-->
        <div class="order-form " id="content">
            <div class="order-content">

                <div class="order-content-top" id="top">
                    <div class="order-table-id"><strong>{{vm.tableId}}号桌</strong>

                        <div class="right">
                            <img src="images/change-table.png" style="width:0.4rem" ui-sref="order-table({stid:vm.tableId})">
                        </div>
                    </div>
                    <div class="menu-name">单号：1268</div>
                    <div style="font-size: 12px">订单编号：{{vm.timestamp}}
                        <div class="glyphicon glyphicon-trash right" ng-if="vm.ordergoods.length !=0"
                             ng-click="vm.showRemove()">

                        </div>
                    </div>
                </div>

                <!--所选菜品及其操作-->
                <div class="order-content-center">
                    <hr>
                    <img src="images/order.png" class="order-img" ng-show="vm.ordergoods.length == 0">

                    <div ng-hide="vm.ordergoods.length == 0" style="position: absolute">
                        <!--所选菜品-->
                        <div style="overflow-y:scroll " id="center">
                            <ul class="order-list">
                                <li ng-repeat="good in vm.ordergoods">
                                    <div class="order-list-left"> {{good.title}}{{good.goodsName}} </div>
                                    <div class="order-list-right">

                                        <div style="position: relative;">
                                            <div class="order-num" ng-if="good.num >1">{{good.num}}</div>
                                            <span>{{good.price}}{{good.fee}}</span>
                                            <img src="images/goods-delete.png" ng-click="vm.removeGood(good,$index)"
                                                 ng-show="vm.tr">
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>


                        <div id="bottom" class="order-list-bottom">
                            <hr>
                            <div style="height: 0.3rem">
                                <span>人数</span>
                                <span class="right">5</span>
                            </div>
                            <hr>
                            <div class="order-beizhu">
                                备注
                            </div>
                            <hr>
                            <div style="height: 0.3rem;text-align: right"> {{vm.price| number:2}</div>
                            <div class="order-sure" ng-click="vm.placeOrder()">下单</div>
                            <div class="order-sure" ng-click="vm.placeOrder()" >结账</div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <!--   右边菜单列表部分-->
        <div class="order-menu">
            <div style="display: inline-block;width: 100%;border-bottom: solid 1px black">
                <div class="menu-top-left">
                    <ul id="menu-fenlei" class="nav nav-pills menu-fenlei" role="tablist">
                        <li role="presentation" ng-class="{'active':$index==0}" ng-repeat="menu in vm.menusList">
                            <a href="#{{menu.groupid}}" aria-controls="{{menu.groupid}}" role="tab" data-toggle="tab">{{menu.name}}</a>
                        </li>

                    </ul>
                </div>
                <div class="menu-top-tright">
                    <input type="text" size="30" value="牛肉饭" class="menu-search" ng-model="seaGood">

                    <div ng-click="vm.search(seaGood)">
                        <img src="images/search.png">
                        <span>搜索 </span>
                    </div>
                </div>
            </div>

            <div class=" tab-content menu">

                <div role="tabpanel" id="{{menu.groupid}}" class="menu-content tab-pane" ng-class="{'active':$index==0}"
                     ng-repeat="menu in vm.menusList">
                    <ul>
                        <li ng-repeat="good in menu.goods |filter:{title:seaGood}" ng-click="vm.addOrderlist(good)">
                            <div class="menu-food">
                                <div class="menu-name">
                                    {{good.title}}
                                </div>
                                <div class="menu-price">
                                    <span><img src="images/num.png">{{good.rateNum}}</span>
                                    <span class="menu-span">¥{{good.price}}</span></div>
                            </div>
                        </li>
                    </ul>
                    <div class="menu-bottom">
                        <img src="images/menu-icon.png"
                             style="width:2rem">
                    </div>

                </div>
            </div>
        </div>

    </div>
    <div class="eshop-bottom">
        <div ng-click="vm.goback()"><span>
            返回|
        </span></div>
    </div>

</div>


<!--点击下单  下单成功后弹出-->
<div class="eshop-modal" ng-show="vm.show">
    <img src="images/order-success.png" class="eshop-modal_img">
</div>
<!--
<div class="eshop-modal">
    <div style="width: 30%;height: 50%;margin:10% auto;background-color: #22a92b">
        <div style="margin: 20%;background-color: white;height: 60%">
            <div>
                当前所选商品是否需要保存？
            </div>
            <div>
                <button>否</button>
                <button>是</button>
            </div>
        </div>
    </div>

</div>-->
